<template>
    <div class="crane">
        <img src="@/assets/image/home/crane.png" class="main-crane" />
        <div class="middle-car" :style="{ left: `${middleCar}px` }">
            <img src="@/assets/image/home/middle-car.png" width="87" height="103" class="car" style="z-index: 2" />
            <div class="hook hook-one" :style="{ height: `${hookOne}px` }">
                <img src="@/assets/image/home/line.png" class="hook-line" />
                <img src="@/assets/image/home/hook.png" class="hook-bottom" />
            </div>
            <div class="hook hook-two" :style="{ height: `${hookTwo}px` }">
                <img src="@/assets/image/home/line.png" class="hook-line" />
                <img src="@/assets/image/home/hook.png" class="hook-bottom" />
            </div>
            <aside class="info info-top-car">
                <div class="device">
                    <span>上小车</span>
                    <span>{{ data[0]?.measure || oldPosition.middleCar?.measure }}m</span>
                </div>
            </aside>
            <aside class="info">
                <div class="info-item">
                    <div>{{ data[0]?.trolleyLifting[0].sensorName || oldPosition.middleCar?.trolleyLifting[0]?.sensorName }}</div>
                    <div>
                        <span>起升高度</span>
                        <span>{{ data[0]?.trolleyLifting[0].height || oldPosition.middleCar?.trolleyLifting[0]?.height }}m</span>
                    </div>
                    <div>
                        <span>起升重量</span>
                        <span>{{ data[0]?.trolleyLifting[0].weight || oldPosition.middleCar?.trolleyLifting[0]?.weight }}t</span>
                    </div>
                </div>
                <div class="info-item">
                    <div>{{ data[0]?.trolleyLifting[1].sensorName || oldPosition.middleCar?.trolleyLifting[1]?.sensorName }}</div>
                    <div>
                        <span>起升高度</span>
                        <span>{{ data[0]?.trolleyLifting[1].height || oldPosition.middleCar?.trolleyLifting[1]?.height }}m</span>
                    </div>
                    <div>
                        <span>起升重量</span>
                        <span>{{ data[0]?.trolleyLifting[1].weight || oldPosition.middleCar?.trolleyLifting[1]?.weight }}t</span>
                    </div>
                </div>
            </aside>
        </div>
        <div class="small-car" :style="{ left: `${smallCar}px` }">
            <img src="@/assets/image/home/small-car.png" width="57" height="35" class="car" />
            <div class="hook hook-three" :style="{ height: `${hookThree}px` }">
                <img src="@/assets/image/home/line.png" class="hook-line" />
                <img src="@/assets/image/home/hook.png" class="hook-bottom" />
            </div>
            <aside class="info info-bottom-car">
                <div class="device">
                    <span>下小车</span>
                    <span>{{ data[1]?.measure || oldPosition.smallCar?.measure }}m</span>
                </div>
            </aside>
            <aside class="info info-left">
                <div class="info-item">
                    <div>{{ data[1]?.trolleyLifting[0].sensorName || oldPosition.smallCar?.trolleyLifting[0]?.sensorName }}</div>
                    <div>
                        <span>起升高度</span>
                        <span>{{ data[1]?.trolleyLifting[0].height || oldPosition.smallCar?.trolleyLifting[0]?.height }}m</span>
                    </div>
                    <div>
                        <span>起升重量</span>
                        <span>{{ data[1]?.trolleyLifting[0].weight || oldPosition.smallCar?.trolleyLifting[0]?.weight }}t</span>
                    </div>
                </div>
            </aside>
        </div>
        <div class="yard">
            <div class="yard-title">
                <span>预装场地</span>
                <img src="@/assets/image/home/compass.png" class="compass" />
            </div>
            <div class="main">
                <div class="line line-one">
                    <div class="box-one">
                        <div class="box" style="background-color: #8e98ba; top: 20px"></div>
                    </div>
                </div>
                <div class="line">
                    <div class="box" :style="{ top: `${yard}px` }"></div>
                </div>
                <div class="number">
                    <div>-200</div>
                    <div>0</div>
                    <div>200</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onUnmounted, reactive } from "vue";
import Socket from "@/webSocket";

const socket = new Socket();
const middleCar = ref(200);
const smallCar = ref(400);
const hookOne = ref(0);
const hookTwo = ref(0);
const hookThree = ref(0);
const yard = ref(0);
const data = ref([]);
const oldPosition = reactive({
    middleCar: null,
    smallCar: null,
    hookOne: null,
    hookThree: null,
    yard: null
});

socket.connect(`/houduanToQianduan/homeAnimation`, (res) => {
    data.value = res.noticeInfo[0].homeAnimationSensor;
    if (data.value[0]?.percentage) oldPosition.middleCar = data.value[0];
    middleCar.value = setDistance(data.value[0]?.percentage || oldPosition.middleCar?.percentage, 800);
    if (data.value[1]?.percentage) oldPosition.smallCar = data.value[1];
    smallCar.value = setDistance(data.value[1]?.percentage || oldPosition.smallCar?.percentage, 800);
    if (data.value[0]?.trolleyLifting[0]?.percentage) oldPosition.hookOne = data.value[0];
    hookOne.value = setDistance(data.value[0]?.trolleyLifting[0]?.percentage || oldPosition.hookOne?.trolleyLifting[0]?.percentage, 505);
    if (data.value[0]?.trolleyLifting[1]?.percentage) oldPosition.hookTwo = data.value[0];
    hookTwo.value = setDistance(data.value[0]?.trolleyLifting[1]?.percentage || oldPosition.hookTwo?.trolleyLifting[1]?.percentage, 505);
    if (data.value[1]?.trolleyLifting[0]?.percentage) oldPosition.hookThree = data.value[1];
    hookThree.value = setDistance(data.value[1]?.trolleyLifting[0]?.percentage || oldPosition.hookThree?.trolleyLifting[0]?.percentage.percentage, 505);
    if (res.noticeInfo[0]?.cartLocation) oldPosition.yard = res.noticeInfo[0];
    const position =
        (res.noticeInfo[0]?.cartLocation || oldPosition.yard?.cartLocation) <= 0
            ? (Math.abs(res.noticeInfo[0].cartLocation || oldPosition.yard?.cartLocation) + 100) / 2
            : (100 - Math.abs(res.noticeInfo[0].cartLocation || oldPosition.yard?.cartLocation)) / 2;
    yard.value = 160 * (1 - position / 100) - 4;
});

onUnmounted(() => {
    socket.disconnect();
});

function setDistance(km, end) {
    return end * (1 - km);
}
</script>

<style lang="less" scoped>
.crane {
    position: absolute;
    top: 176px;
    left: 463px;
    width: 930px;
    height: 762px;
    .main-crane {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
    }
    .middle-car {
        position: absolute;
        top: 20px;
        transition: all 2.5s ease-in-out;
    }
    .car {
        position: relative;
        vertical-align: top;
        z-index: 1;
    }
    .small-car {
        position: absolute;
        top: 75px;
        transition: all 2.5s ease-in-out;
    }
    .info {
        position: absolute;
        top: 230px;
        left: 100px;
        box-sizing: border-box;
        padding: 16px;
        width: 180px;
        height: 180px;
        background: rgba(27, 54, 70, 0.6);
        font-size: 14px;
        z-index: 999;
        .device {
            display: flex;
            align-items: center;
            span {
                &:first-of-type {
                    font-size: 16px;
                    font-weight: 600;
                    &::before {
                        content: "";
                        display: inline-block;
                        margin-right: 4px;
                        width: 4px;
                        height: 15px;
                        background: #4ba6dd;
                        border-radius: 2px;
                    }
                }
                &:last-of-type {
                    margin-left: 8px;
                }
            }
        }
        .info-item {
            margin-top: 8px;
            div {
                margin-top: 8px;
                span {
                    &:last-of-type {
                        margin-left: 16px;
                    }
                }
            }
        }
    }
    .info-top-car {
        top: -60px;
        left: -30px;
        height: 50px;
    }
    .info-bottom-car {
        top: -60px;
        left: -40px;
        height: 50px;
    }
    .info-left {
        top: 300px;
        height: 110px;
    }
    .hook {
        display: flex;
        flex-direction: column;
        position: absolute;
        width: 22px;
        transition: all 2.5s ease-in-out;
        .hook-line {
            flex: 1;
            height: 0;
        }
        .hook-bottom {
            width: 22px;
            height: 42px;
        }
    }
    .hook-one {
        left: 17px;
        top: 145px;
        z-index: 3;
    }
    .hook-two {
        right: 7px;
        top: 120px;
    }
    .hook-three {
        left: 50%;
        top: 80px;
        transform: translateX(-50%);
    }
    .yard {
        position: absolute;
        top: -86px;
        right: -192px;
        padding: 25px 13px 15px;
        width: 157px;
        height: 210px;
        background: rgba(27, 54, 70, 0.6);
        color: #fff;
        z-index: 3;
        .yard-title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 20px;
            .compass {
                margin-right: 15px;
                vertical-align: top;
            }
        }
        .main {
            display: flex;
            margin-top: 20px;
            .line {
                box-sizing: border-box;
                position: relative;
                margin-left: 26px;
                width: 20px;
                height: 160px;
                background: rgba(75, 166, 221, 0.5);
                border: 1px solid #4ba6dd;
                .box {
                    position: absolute;
                    left: -7px;
                    width: 33px;
                    height: 4px;
                    background: #ff7a45;
                    transition: all 2.5s ease-in-out;
                }
                .box-one {
                    background-color: #8e98ba;
                }
            }
            .line-one {
                background-color: #687489;
                border: 1px solid #8e98ba;
            }
            .number {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin-left: 20px;
                height: 160px;
            }
        }
    }
}
</style>
